<script setup lang="ts">
import type { FuKuanFangShiXiangQing } from '~/api/services/main.api';

interface MethodItem {
  name: string;
  list: FuKuanFangShiXiangQing[];
};

export interface SelectPaymentMethodProps {
  open?: boolean;
  activeMethod?: FuKuanFangShiXiangQing;
  list: MethodItem[];
  onSelect?: (method: FuKuanFangShiXiangQing) => void;
};

const props = withDefaults(defineProps<SelectPaymentMethodProps>(), {});

const appStore = useAppStore();

const { verified } = storeToRefs(useUserStore());

const openRef = defineModel('open', { default: false });

const activeMethodRef = defineModel<SelectPaymentMethodProps['activeMethod']>('activeMethod');

const getListRef = computed(() => (props.list || []).filter(x => x.list?.length > 0));

const expansionStatus = ref<boolean[]>([]);

function expansionFn(idx: number) {
  const val = expansionStatus.value[idx];
  expansionStatus.value[idx] = !val;
}

watch([openRef, getListRef], ([a, b]) => {
  expansionStatus.value = a && b.length ? b.map(() => true) : [];
}, { immediate: true });

function selectMethod(method: FuKuanFangShiXiangQing) {
  if (method.is_maintain) {
    antdMessage.warning({ content: $t('yfNIpgqVy6dw3miYuovn'), duration: 3 });
    return;
  }
  activeMethodRef.value = method;
  props.onSelect?.(method);
  openRef.value = false;
  expansionStatus.value = [];
}
</script>

<template>
  <div class="flex-1 lt-mobile:(h-full overflow-y-auto)">
    <slot />
    <div class="grid grid-cols-2 w-full gap-x-3 gap-y-2">
      <div />
      <div class="h-3 w-full bg-sys-layer-a" />
    </div>
    <div
      class="grid grid-cols-1 max-h-90 gap-4 overflow-y-auto rounded-lg rounded-tr-0 bg-sys-layer-a p-3"
      :class="verified?.authenticator ? `!lt-mobile:(max-h-[82vh])` : `!lt-mobile:(max-h-[72vh])`"
    >
      <div v-for="(item, idx) of getListRef" :key="idx" class="text-sm text-sys-text-body">
        <div class="flex-between gap-3 whitespace-normal break-words break-all">
          <div class="truncate">
            {{ item.name }}
          </div>
          <div v-if="expansionStatus[idx]" class="i-mingcute:up-line h-4.5 w-4.5 cursor-pointer" @click="expansionFn(idx)" />
          <div v-else class="i-mingcute:down-line h-4.5 w-4.5 cursor-pointer" @click="expansionFn(idx)" />
        </div>
        <div v-if="expansionStatus[idx]" class="grid grid-cols-3 mt-2 gap-3">
          <div
            v-for="method of item.list"
            :key="method.code"
            class="relative w-full cursor-pointer rounded-lg bg-sys-layer-d p-1.5 text-sys-text-body"
            :class="{ 'active-method': method.bank_code === activeMethodRef?.bank_code && method.code === activeMethodRef?.code }"
            @click="selectMethod(method)"
          >
            <div class="img mb-1 w-full flex-center rounded-lg bg-sys-layer-e py-1">
              <img class="h-8 max-h-10 max-w-22 object-cover" :src="appStore.joinCdnPath(method.image_icon)">
            </div>
            <div class="truncate text-xs">
              {{ method.name }}
            </div>
            <div v-if="method.is_maintain" class="abs-full flex-center cursor-not-allowed backdrop-grayscale">
              <i class="i-local:maintain text-7" />
            </div>
          </div>
          <TEmpty v-if="!item.list.length" />
        </div>
      </div>

      <TEmpty v-if="!getListRef.length" />
    </div>
  </div>
</template>

<style lang="scss">
.active-method {
  --uno: '!bg-sys-layer-e !text-sys-text-head font-semibold border-(1px red-500 solid)';
  .img {
    --uno: '!bg-slate';
  }
}
</style>
